<template>
  <div id="div1">
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column label="角色">
          <template #default="scope">
            <el-tag v-if="scope.row.type == '1'">管理员</el-tag>
            <el-tag v-else>编辑</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="头像">
          <template #default="scope">
            <el-avatar
              :size="50"
              v-if="scope.row.avator"
              :src="'http://localhost:3000' + scope.row.avator"
            />
            <el-avatar :size="50" :icon="UserFilled" v-else> </el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="right">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      v-model="dialogVisible"
      title="编辑"
      class="el-dialog"
      :width="Width + '%'"
    >
      <el-form
        label-position="top"
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        style="width: 90%"
        status-icon
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model="ruleForm.checkPass" type="password" />
        </el-form-item>
        <el-form-item label="用户类型" prop="type">
          <el-select v-model="ruleForm.type" placeholder="选择角色">
            <el-option label="管理员" value="1" />
            <el-option label="编辑" value="-1" />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="ActionEdit"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { Getalluser, UserDelete, Useredit } from "@/request/home/userapi.js";
import { UserFilled } from "@element-plus/icons-vue";
import { onMounted, ref, reactive, toRefs, toRef, computed, watch } from "vue";
import { useStore } from "../../../stores/counter";
const Store = useStore();
const isShowMenu = computed(() => Store.isShowMenu);
let Width = ref(40);
watch(isShowMenu, (newValue, oldValue) => {
  console.log(newValue);
  if (!newValue) {
    Width.value = 80;
  } else Width.value = 40;
});
const ruleForm = reactive({
  username: "",
  password: "",
  checkPass: "",
  id: "",
  type: "",
});

const tableData = ref(0);
const dialogVisible = ref(false);
function handleEdit(index, row) {
  dialogVisible.value = true;
  ruleForm.username = row.username;
  ruleForm.password = row.password;
  ruleForm.checkPass = row.password;
  ruleForm.id = row.id;
}

function ActionEdit() {
  ruleFormRef.value.validate(async (test) => {
    if (test) {
      const result = await Useredit(ruleForm);
      if (result.data.code === 400)
        ElMessage({
          message: result.data.msg,
          type: "error",
        });
      else {
        GetAlluser();
        ElMessage({
          message: result.data.msg,
          type: "success",
        });
        dialogVisible.value = false;
      }
    }
  });
}
async function handleDelete(index, row) {
  const result = await UserDelete(row.id);
  if (result.data.code === 1)
    ElMessage({
      message: result.data.msg,
      type: "success",
    });
  else
    ElMessage({
      message: result.data.msg,
      type: "err",
    });
  GetAlluser();
}

async function GetAlluser() {
  const result = await Getalluser();
  tableData.value = result.data.result;
}

const validatePass = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    if (ruleForm.checkPass !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("checkPass", () => null);
    }
    callback();
  }
};
const validatePass2 = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请再输入一次密码"));
  } else if (value !== ruleForm.password) {
    callback(new Error("两个密码不一样"));
  } else {
    callback();
  }
};

const formSize = ref("default");
const ruleFormRef = ref();

const rules = reactive({
  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, validator: validatePass, trigger: "blur" }],
  checkPass: [{ required: true, validator: validatePass2, trigger: "blur" }],
  type: [
    {
      required: true,
      message: "请选择用户类型",
    },
  ],
});

onMounted(() => {
  GetAlluser();
});
</script>

<style scoped>
#div1 {
  width: 90%;
}
.el-dialog {
  width: 30%;
}
@media (max-width: 450px) {
  #div1 {
    width: 100%;
  }
}
</style>